<template>
  <div class="main">
    <view class="item">
      <view class="flex justifyBetween alignCenter">
        <view class="bold fz14">您的身高是</view>
      </view>
      <picker-view @change="bindChange" class="picker-view" :value="heightModel">
        <picker-view-column>
          <view class="timeItem" :class="{active: index ==heightModel[0]}" v-for="(item,index) in heights" :key="index">{{item}}cm</view>
        </picker-view-column>
      </picker-view>
    </view>

    <view class="item city" v-if="addressInfo.length">
      <view class="flex justifyBetween alignCenter">
        <view class="bold fz14">您的家乡在</view>
      </view>

      <picker-view @change="cityBindChange" class="picker-view" :value="cityValue">
        <picker-view-column>
          <view class="timeItem" :class="{active: index ==cityValue[0]}" v-for="(item,index) in cityData.Provinces" :key="index">{{item.proviceName}}</view>
        </picker-view-column>
        <picker-view-column>
          <view class="timeItem" :class="{active: index ==cityValue[1]}" v-for="(item,index) in cityData.Citys" :key="index">{{item.cityName}}</view>
        </picker-view-column>
        <picker-view-column>
          <view class="timeItem" :class="{active: index ==cityValue[2]}" v-for="(item,index) in cityData.Area" :key="index">{{item.countyName}}</view>
        </picker-view-column>
      </picker-view>
    </view>

    <view class="next flex justifyFlexEnd">
      <uv-button @click="next" :customStyle="nextBtnStyle" text="下一步" shape="circle" color="linear-gradient(to right, rgba(178, 161, 255, 1), rgba(211, 167, 249, 1))"></uv-button>
    </view>
  </div>
</template>

<script setup lang="ts">
import useCounterStore from "@/stores/counter";
const counter = useCounterStore();
const { proxy } = getCurrentInstance();
let props = defineProps(["modelValue"]);
const emit = defineEmits(["update:modelValue", "fatherMethod"]);
const valueDate = computed({
  get() {
    return props.modelValue;
  },
  set(value) {
    emit("update:modelValue", value);
  },
});
let nextBtnStyle = ref({
  width: "100px",
  boxShadow: "0 2px 8px 2px rgba(182, 159, 254, 0.53)",
});
let cityValue = ref([0, 0, 0]);
let heightModel = ref([]);

let addressInfo = computed(() => {
  return counter.slParams.hometown;
});

let cityData = computed(() => {
  let val = [...cityValue.value];
  let data = proxy.$utils.deepcopy(addressInfo.value);
  let list = proxy.$utils.deepcopy(addressInfo.value);
  let arr = [];
  for (let index = 0; index < list.length; index++) {
    const element = list[index];
    let query = proxy.$utils.deepcopy(element);
    delete query.city;
    arr.push(query);
  }
  let obj = {
    Provinces: arr,
    Citys: data[val[0]].city,
    Area: data[val[0]].city[val[1]].county,
  };
  return obj;
});

let heights = computed(() => {
  let arr = [];
  for (let index = 150; index < 250; index++) {
    arr.push(index);
  }
  return arr;
});

let bindChange = (e) => {
  let val = e.detail.value;
  heightModel.value = val;
  valueDate.value.height = heights.value[val[0]];
};

let cityBindChange = (e) => {
  let val = e.detail.value;
  valueDate.value.homeEconomize = cityData.value.Provinces[val[0]].proviceName;
  valueDate.value.homeMarket = cityData.value.Citys[val[1]].cityName;
  valueDate.value.homeCounty = cityData.value.Area[val[2]].countyName;
  cityValue.value = val;
};
let next = () => {
  if (!valueDate.value.homeEconomize)
    return proxy.$utils.showToast("请选择您的家乡");
  if (!valueDate.value.height) return proxy.$utils.showToast("请选择您的身高");
  emit("fatherMethod");
};
</script>



<style lang="scss" scoped>
.city {
  margin-top: 50px;
}
.next {
  margin-right: 10vw;
  margin-top: 10vw;
}
.picker-view {
  width: 100%;
  height: 150px;
  .timeItem {
    line-height: 34px;
    text-align: center;
  }
}
</style>
